<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;

            background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
        }

        .text {
            width: 100%;
            text-align: center;
            position: fixed;
            bottom: 50px;
            z-index: 5;
        }

        .text input {
            width: 300px;
            height: 50px;
            border-radius: 10px;
            outline: none;
            border: none;
        }

        .text button {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            border: none;
        }

        .box {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: #ba83ca;
            padding: 20px;
            position: absolute;
            left: 40px;
            top: 100px;
            border: 1px dotted white;
            /* 修改鼠标样式 */
            cursor: move;
        }

        .box span {
            position: absolute;
            right: 10px;
            bottom: 10px;
            /* 修改鼠标样式 */
            cursor: pointer;
        }
    </style>
</head>

<body>

    <!-- <div class="box">
        <p>愿望内容</p>
        <span>关闭</span>
    </div> -->

    <div class="text">
        <input type="text" name="" id="" placeholder="请输入你的愿望">
        <button>发布</button>
    </div>

    <script>
        let input = document.getElementsByTagName("input")[0];

        function randomNumber(min, max) {
            return parseInt(Math.random() * (max - min + 1) + min);
        }

        // 1.获取用户输入的愿望，新增一个box盒子，插入到body中
        // 鼠标点击事件委托
        document.body.onclick = function () {
            // 点击发布按钮
            if (event.target.localName === "button") {
                let word = input.value;
                if (word) {
                    // 方法一：
                    // document.body.innerHTML += `
                    // <div class="box" style="left:${randomNumber(0,innerWidth-100)}px;top:${randomNumber(0,innerHeight-100)}px;
                    // background-color: rgb(${randomNumber(0,255)},${randomNumber(0,255)},${randomNumber(0,255)});">
                    //     <p>${word}</p>
                    //     <span>关闭</span>
                    // </div>
                    // `;

                    // 方法二：推荐
                    let box=document.createElement("box");
                    box.innerHTML=`
                        <p>${word}</p>
                        <span>关闭</span>
                    `;
                    box.className="box";
                    box.style.left=randomNumber(0,innerWidth-100)+"px";
                    box.style.top=randomNumber(0,innerHeight-100)+"px";
                    box.style.backgroundColor=`rgb(${randomNumber(0,255)},${randomNumber(0,255)},${randomNumber(0,255)})`;
                    document.body.appendChild(box);
                    input.value="";

                } else {
                    alert("请输入你的愿望！");
                }
            }

            // 点击关闭按钮
            if(event.target.localName==="span"){
                event.target.parentNode.remove();
            }
        }

        // 鼠标按下事件委托
        document.body.onmousedown = function () {
            if (event.target.className === "box") {
                let that=event.target;//用一个变量接收用户最开始鼠标按下的元素节点
                window.onmousemove = function () {
                    that.style.left = event.clientX - 50 + "px";
                    that.style.top = event.clientY - 50 + "px";
                    // 不能超出可视窗口
                    // 水平方向
                    if (that.offsetLeft <= 0) {
                        that.style.left = 0;
                    } else if (that.offsetLeft >= innerWidth - that.offsetWidth) {
                        that.style.left = innerWidth - that.offsetWidth + "px";
                    }

                    // 垂直方向
                    if (that.offsetTop <= 0) {
                        that.style.top = 0;
                    } else if (that.offsetTop >= innerHeight - that.offsetHeight) {
                        that.style.top = innerHeight - that.offsetHeight + "px";
                    }

                }
            }
        }

        // 鼠标抬起事件
        document.body.onmouseup=function(){
            window.onmousemove=null;
        }
    </script>

</body>

</html>